<template>
  <el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="moneyItem">
          <span class="bigFont">余额：</span><span class="bigFont" style="color:#000">￥{{ginfo.balance}}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="giftMoneyItem">
          <span class="bigFont">赠送余额：</span><span class="bigFont" style="color:#000">￥{{ginfo.giftbalance}}</span>
        </div>
      </el-col>
    </el-row>

    <el-collapse v-model="activeName" style="margin-top: 20px">
      <el-collapse-item title="客户未用项目" name="1">
        <el-table :data="slist" :stripe="true" empty-text="无任何可用项目" height="195">
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column prop="sname" label="项目" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="cardtype" label="所属类型">
            <template slot-scope="scope">
              <el-tag size="mini" v-if="scope.row.cardtype==1">期卡</el-tag>
              <el-tag type="info" size="mini" v-else>疗程卡</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="原价"></el-table-column>
          <el-table-column prop="disprice" label="折扣价"></el-table-column>
          <el-table-column prop="num" label="总数">
            <template slot-scope="scope">
              <span v-if="scope.row.cardtype==1">不限次数</span>
              <span v-else>{{scope.row.num}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="nownum" label="剩余数">
            <template slot-scope="scope">
              <span v-if="scope.row.cardtype==1">不限次数</span>
              <span v-else>{{scope.row.nownum}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="endtime" label="有效期" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-if="scope.row.cardtype===1">{{scope.row.endtime|dateTime}}</span>
              <span v-else>用完为止</span>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item title="客户未用产品" name="2">
        <el-table :data="glist" :stripe="true" empty-text="无任何可用产品" height="195">
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column prop="gname" label="产品" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="price" label="原价"></el-table-column>
          <el-table-column prop="disprice" label="折扣价"></el-table-column>
          <el-table-column prop="num" label="总数"></el-table-column>
          <el-table-column prop="nownum" label="剩余数"></el-table-column>
          <el-table-column prop="isgift" label="是否赠送">
            <template slot-scope="scope">
              <span class="el-icon-h-shi green" v-if="scope.row.isgift"></span>
              <span class="el-icon-h-fou red" v-else></span>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </el-row>
</template>

<script>
import Guest from '#/src/shop/guest.js'
import C from '#/src/common/common.js'

export default {
    name: 'accountMessage',
    data () {
        return {
            ginfo: {},
            glist: [],
            slist: [],
            activeName: ['1', '2'] 
        }
    },
    methods: {
        async getGuestAccountInfo (id) {
            let info = await Guest.getGuestAccountInfo(id)
            this.ginfo = info.ginfo
            this.glist = info.glist
            this.slist = info.slist
        }
    },
    mounted: function () {
        let data = C.getDatas()
        this.getGuestAccountInfo(data.id)
    }
}
</script>

<style>
  .moneyItem{
    display: flex;
    border: 1px solid #0DAFFF;
    border-radius: 8px;
    color: #0DAFFF;
    padding: 10px;
    justify-content: space-around;
  }
  .giftMoneyItem{
    display: flex;
    border: 1px solid #27AE60;
    border-radius: 8px;
    color: #27AE60;
    padding: 10px;
    justify-content: space-around;
  }
  .bigFont{
    font-size: 1.17em;
    font-weight: bold;
  }
  .box-card{
    margin-top: 15px
  }
  .el-table td, .el-table th {
    padding: 1px 0;
  }
</style>
